<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>抽奖</title>

    <style>
        #smoke{
            display: inline-block;
            height: 100px;
            width: 100px;
            text-align: center;
            line-height: 100px;
            background: burlywood;
        }
    </style>
</head>
<body>

    <div>
        <span id="smoke"></span>
    </div>

    <div>
        <input type="button" value="开始" id="start" >
        <input type="button" value="结束" id="stop">
    </div>
    
    <script type = 'text/javascript'>
        var start = document.getElementById('start'),
            stop = document.getElementById('stop'),
            smoke = document.getElementById('smoke');
    
        // 抽奖奖品
        var goods = ['小米手环' , 'Mac笔记本' , '双开门冰箱'  , '谢谢参与' , '厨房三件套'];
        
        var index = 0;
        var timer = null;    // 这里将timer定义在外面因为还有其他环境要使用到
        start.onclick = function(){
                start.disabled = true;
                timer = setInterval(function(){
                index++;
                if(index > goods.length-1){
                    index=0;
                }
                smoke.innerText = goods[index];
            },100); 
        }
    
        stop.onclick = function(){
            start.disabled = false;
            clearInterval(timer);   // 注意这里不能拿到time因为它是局部变量，解决方法：将timer定义到外面
        }

    </script>
</body>
</html>
